Grundlegende native Formularelemente

Text <input> Felder sind die grundlegendsten Formular-Widgets. Sie sind eine sehr praktische Möglichkeit, dem Benutzer die Eingabe jeglicher Art von Daten zu ermöglichen, und wir haben bereits einige einfache Beispiele gesehen.

Alle grundlegenden Texteingabekontrollen teilen einige gemeinsame Verhaltensweisen:

• Sie können als readonly (der Benutzer kann den Eingabewert nicht ändern, aber er wird dennoch mit den anderen Formulardaten gesendet) oder disabled (der Eingabewert kann nicht geändert werden und wird nie mit den anderen Formulardaten gesendet) markiert werden.
• Sie können einen placeholder haben; dies ist der Text, der im Text-Eingabefeld erscheint, um kurz den Zweck des Feldes zu beschreiben.
• Sie können durch size (die physische Größe des Feldes) und maxlength (die maximale Anzahl an Zeichen, die in das Feld eingegeben werden können) eingeschränkt werden.
• Sie können von Rechtschreibprüfung profitieren (mithilfe des spellcheck Attributs).

Ein einzeiliges Textfeld wird erstellt, indem ein <input> Element verwendet wird, dessen type Attributwert auf text gesetzt ist oder indem das type Attribut ganz weggelassen wird (text ist der Standardwert). Der Wert text für dieses Attribut ist auch der Fallback-Wert, wenn der Wert, den Sie für das type Attribut angeben, dem Browser unbekannt ist (zum Beispiel, wenn Sie type="color" angeben und der Browser native Farbwähler nicht unterstützt).

Hier ist ein einfaches Beispiel für ein einzeiliges Textfeld:

<input type="text" id="comment" name="comment" value="I'm a text field" />

Einzeilige Textfelder haben nur eine echte Einschränkung: Wenn Sie Text mit Zeilenumbrüchen eingeben, entfernt der Browser diese Zeilenumbrüche, bevor die Daten an den Server gesendet werden.

Der folgende Screenshot zeigt ein Texteingabefeld im Standard-, fokussierten und deaktivierten Zustand. Die meisten Browser zeigen den fokussierten Zustand mit einem Fokusring um die Kontrolle an und den deaktivierten Zustand mit grauem Text oder einer verblassten/halbtransparenten Kontrolle.

Die Screenshots in diesem Dokument wurden im Chrome-Browser auf macOS aufgenommen. Es kann kleinere Abweichungen in diesen Feldern/Schaltflächen in verschiedenen Browsern geben, aber die grundlegende Hervorhebungstechnik bleibt ähnlich.

Passwortfeld

Einer der ursprünglichen Eingabetypen ist der password Textfeldtyp:

<input type="password" id="pwd" name="pwd" />

Der folgende Screenshot zeigt ein Passwort-Eingabefeld, in dem jedes Eingabezeichen als Punkt angezeigt wird.

Der password Wert fügt den eingegebenen Texten keine speziellen Einschränkungen hinzu, aber er verdeckt den eingegebenen Wert im Feld (z.B. mit Punkten oder Sternchen), damit er nicht leicht von anderen gelesen werden kann.

Denken Sie daran, dass dies nur eine Benutzeroberflächenfunktion ist; es sei denn, Sie senden Ihr Formular sicher, wird es im Klartext gesendet, was schlecht für die Sicherheit ist — eine bösartige Partei könnte Ihre Daten abfangen und Passwörter, Kreditkartendaten oder was auch immer Sie gesendet haben, stehlen. Die beste Möglichkeit, Benutzer vor dieser Gefahr zu schützen, besteht darin, Seiten, die Formulare enthalten, über eine sichere Verbindung zu hosten (d.h. unter einer https:// Adresse), damit die Daten vor dem Senden verschlüsselt werden.

Browser erkennen die Sicherheitsimplikationen des Sendens von Formulardaten über eine unsichere Verbindung und haben Warnungen, um Benutzer von der Verwendung unsicherer Formulare abzuschrecken. Weitere Informationen darüber, was Firefox implementiert, finden Sie unter Unsichere Passwörter.

Eine weitere ursprüngliche Textkontrolle ist der hidden Eingabetyp. Dieser wird verwendet, um eine Formulareingabe zu erstellen, die für den Benutzer unsichtbar ist, aber noch zusammen mit den anderen Formulardaten an den Server gesendet wird, sobald das Formular abgeschickt ist — zum Beispiel könnte man einen Zeitstempel an den Server senden, der angibt, wann eine Bestellung aufgegeben wurde. Da es versteckt ist, kann der Benutzer den Wert nicht sehen oder absichtlich ändern, es wird nie fokussiert und ein Screenreader bemerkt es auch nicht.

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

Wenn Sie ein solches Element erstellen, ist es erforderlich, seine name und value Attribute festzulegen. Der Wert kann dynamisch über JavaScript gesetzt werden. Der hidden Eingabetyp sollte kein zugehöriges Label haben.

Andere Texteingabetypen wie search, url und tel werden im nächsten Kurs behandelt, HTML5 Eingabetypen.

Auswählbare Elemente sind Kontrollen, deren Zustand Sie durch Anklicken dieser oder ihrer zugehörigen Labels ändern können. Es gibt zwei Arten von auswählbaren Elementen: das Kontrollkästchen und das Optionsfeld. Beide verwenden das checked Attribut, um anzugeben, ob das Widget standardmäßig ausgewählt ist oder nicht.

Es ist erwähnenswert, dass diese Widgets nicht genau wie andere Formular-Widgets verhalten. Für die meisten Formular-Widgets, wenn das Formular eingereicht wird, werden alle Widgets, die ein name Attribut haben, gesendet, auch wenn kein Wert ausgefüllt wurde. Im Fall von auswählbaren Elementen werden deren Werte nur gesendet, wenn sie ausgewählt sind. Sind sie nicht ausgewählt, wird nichts gesendet, nicht einmal deren Namen. Sind sie ausgewählt, haben aber keinen Wert, wird der Name mit einem Wert von on gesendet.

Für maximale Benutzerfreundlichkeit/Barrierefreiheit wird empfohlen, jede Liste verwandter Elemente in einem <fieldset> einzuschließen, mit einem <legend>, das eine allgemeine Beschreibung der Liste bereitstellt. Jedes einzelne Paar von <label>/<input> Elementen sollte in einem eigenen Listenelement (oder ähnlichem) enthalten sein. Das zugehörige <label> wird im Allgemeinen direkt vor oder nach dem Optionsfeld oder Kontrollkästchen platziert, wobei die Anweisungen für die Gruppe der Optionsfelder oder Kontrollkästchen im Allgemeinen der Inhalt des <legend> sind. Beispiele für die Struktur finden Sie in den oben verlinkten Beispielen.

Ein Kontrollkästchen wird erstellt, indem das <input> Element mit einem type Attribut auf den Wert checkbox gesetzt wird.

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />

Verwandte Kontrollkästchen sollten dasselbe name Attribut verwenden. Das Hinzufügen des checked Attributs macht das Kontrollkästchen automatisch ausgewählt, wenn die Seite geladen wird. Das Anklicken des Kontrollkästchens oder seines zugehörigen Labels schaltet das Kontrollkästchen ein und aus.

<fieldset>
  <legend>Choose all the vegetables you like to eat</legend>
  <ul>
    <li>
      <label for="carrots">Carrots</label>
      <input
        type="checkbox"
        id="carrots"
        name="vegetable"
        value="carrots"
        checked />
    </li>
    <li>
      <label for="peas">Peas</label>
      <input type="checkbox" id="peas" name="vegetable" value="peas" />
    </li>
    <li>
      <label for="cabbage">Cabbage</label>
      <input type="checkbox" id="cabbage" name="vegetable" value="cabbage" />
    </li>
  </ul>
</fieldset>

Der folgende Screenshot zeigt Kontrollkästchen im Standard-, fokussierten und deaktivierten Zustand. Kontrollkästchen in den Standard- und deaktivierten Zuständen erscheinen ausgewählt, wohingegen im fokussierten Zustand das Kontrollkästchen deaktiviert ist, mit einem Fokusring darum.

Aufgrund der Ein-Aus-Natur von Kontrollkästchen wird das Kontrollkästchen als Kippschalter betrachtet, wobei viele Entwickler und Designer den Standardstil des Kontrollkästchens erweitern, um Knöpfe zu erstellen, die wie Kippschalter aussehen. Sie können ein Beispiel hier in Aktion sehen (siehe auch den Quellcode).

Ein Optionsfeld wird erstellt, indem das <input> Element verwendet wird, mit dessen type Attribut auf den Wert radio gesetzt:

<input type="radio" id="soup" name="meal" value="soup" checked />

Mehrere Optionsfelder können miteinander verbunden werden. Wenn sie denselben Wert für ihr name Attribut teilen, werden sie als in derselben Gruppe von Schaltflächen betrachtet. Nur eine Schaltfläche in einer gegebenen Gruppe kann gleichzeitig ausgewählt werden; das bedeutet, dass, wenn eine von ihnen ausgewählt ist, alle anderen automatisch deaktiviert werden. Wenn das Formular gesendet wird, wird nur der Wert des ausgewählten Optionsfelds gesendet. Wenn keines von ihnen ausgewählt ist, wird die gesamte Gruppe von Optionsfeldern als in einem unbekannten Zustand betrachtet und es wird kein Wert mit dem Formular gesendet. Sobald eines der Optionsfelder in einer gleichnamigen Gruppe von Schaltflächen ausgewählt ist, ist es dem Benutzer nicht möglich, alle Schaltflächen zu deaktivieren, ohne das Formular zurückzusetzen.

<fieldset>
  <legend>What is your favorite meal?</legend>
  <ul>
    <li>
      <label for="soup">Soup</label>
      <input type="radio" id="soup" name="meal" value="soup" checked />
    </li>
    <li>
      <label for="curry">Curry</label>
      <input type="radio" id="curry" name="meal" value="curry" />
    </li>
    <li>
      <label for="pizza">Pizza</label>
      <input type="radio" id="pizza" name="meal" value="pizza" />
    </li>
  </ul>
</fieldset>

Der folgende Screenshot zeigt standardmäßig und deaktivierte Optionsfelder im ausgewählten Zustand, zusammen mit einem fokussierten Optionsfeld im deaktivierten Zustand.

Das Optionsfeld ist eigentlich keine Schaltfläche, trotz seines Namens; lassen Sie uns mit tatsächlichen Schaltflächen weitermachen! Es gibt drei Eingabetypen, die Schaltflächen produzieren:

submit

Sendet die Formulardaten an den Server. Bei <button> Elementen führt das Weglassen des type Attributs (oder ein ungültiger Wert von type) zu einer Übermittlungsschaltfläche.

reset

Setzt alle Formularelemente auf ihre Standardwerte zurück.

button

Schaltflächen, die keine automatische Wirkung haben, aber mittels JavaScript-Code angepasst werden können.

Dann haben wir auch das <button> Element selbst. Dieses kann ein type Attribut mit den Werten submit, reset oder button annehmen, um das Verhalten der drei oben genannten <input> Typen zu imitieren. Der Hauptunterschied zwischen den beiden ist, dass tatsächliche <button> Elemente viel einfacher zu stylen sind.

<p>Using &lt;input></p>
<p>
  <input type="submit" value="Submit this form" />
  <input type="reset" value="Reset this form" />
  <input type="button" value="Do Nothing without JavaScript" />
</p>
<p>Using &lt;button></p>
<p>
  <button type="submit">Submit this form</button>
  <button type="reset">Reset this form</button>
  <button type="button">Do Nothing without JavaScript</button>
</p>

Unten finden Sie Beispiele für jeden <input> Typ der Schaltfläche, zusammen mit dem äquivalenten <button> Typ.

<button type="button">This is an <strong>anonymous button</strong></button>

<input type="button" value="This is an anonymous button" />

Schaltflächen verhalten sich immer gleich, ob Sie ein <button> Element oder ein <input> Element verwenden. Wie Sie aus den Beispielen sehen können, ermöglichen <button> Elemente jedoch die Verwendung von HTML in ihrem Inhalt, der zwischen den öffnenden und schließenden <button> Tags eingefügt wird. <input> Elemente hingegen sind Void-Elemente; ihr angezeigter Inhalt wird in das value Attribut eingefügt und akzeptiert daher nur Klartext als Inhalt.

Der folgende Screenshot zeigt eine Schaltfläche im Standardzustand, Fokussierungszustand und deaktivierten Zustand. Im Fokussierungszustand gibt es einen Fokusring um die Schaltfläche, und im deaktivierten Zustand ist die Schaltfläche ausgegraut.

Die Bildschaltfläche-Kontrolle wird genau wie ein <img> Element gerendert, außer dass sie sich wie eine Übermittlungsschaltfläche verhält, wenn der Benutzer darauf klickt.

Eine Bildschaltfläche wird durch ein <input> Element erstellt, dessen type Attribut auf image gesetzt ist. Dieses Element unterstützt genau denselben Satz von Attributen wie das <img> Element, plus alle von anderen Formularschaltflächen unterstützten Attribute.

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

Wenn die Bildschaltfläche verwendet wird, um das Formular zu senden, sendet diese Kontrolle ihren Wert nicht — stattdessen werden die X- und Y-Koordinaten des Klicks auf das Bild gesendet (die Koordinaten sind relativ zum Bild, was bedeutet, dass die obere linke Ecke des Bildes die Koordinate (0, 0) darstellt). Die Koordinaten werden als zwei Schlüssel/Wert-Paare gesendet:

• Der X-Wert-Schlüssel ist der Wert des name Attributs gefolgt von der Zeichenfolge ".x".
• Der Y-Wert-Schlüssel ist der Wert des name Attributs gefolgt von der Zeichenfolge ".y".

Wenn Sie also beispielsweise auf das Bild an der Koordinate (123, 456) klicken und es über die get Methode senden, werden Sie die Werte der URL folgendermaßen hinzugefügt sehen:

http://foo.com?pos.x=123&pos.y=456

Dies ist eine sehr bequeme Art, eine "Hot Map" zu erstellen. Wie diese Werte gesendet und abgerufen werden, wird im Artikel Formulardaten senden im Detail beschrieben.

Es gibt einen letzten <input> Typ, der uns in frühem HTML erreichte: den Datei-Eingabetyp. Formulare können Dateien an einen Server senden (diese spezielle Aktion wird auch im Artikel Formulardaten senden im Detail beschrieben). Das Dateiauswahl-Widget kann verwendet werden, um eine oder mehrere Dateien zum Senden auszuwählen.

Um ein Dateiauswahl-Widget zu erstellen, verwenden Sie das <input> Element mit dessen type Attribut auf file gesetzt. Die Arten von Dateien, die akzeptiert werden, können mittels des accept Attributs eingeschränkt werden. Wenn Sie zusätzlich möchten, dass der Benutzer mehr als eine Datei auswählen darf, können Sie dies mit dem multiple Attribut tun.

In diesem Beispiel wird eine Dateiauswahl erstellt, die Grafiken anfragt. In diesem Fall darf der Benutzer mehrere Dateien auswählen.

<input type="file" name="file" id="file" accept="image/*" multiple />

Auf einigen mobilen Geräten kann der Dateiauswähler auf Fotos, Videos und Audio zugreifen, die direkt durch die Kamera und das Mikrofon des Geräts aufgenommen wurden, indem Erfassungsinformationen zum accept Attribut wie folgt hinzugefügt werden:

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

Der folgende Screenshot zeigt das Dateiauswahl-Widget im Standard-, Fokussierungs- und Deaktivierungszustand, wenn keine Datei ausgewählt ist.

Viele der Elemente zur Definition von Formularelementen haben einige ihrer eigenen spezifischen Attribute. Es gibt jedoch einen Satz von Attributen, die allen Formularelementen gemeinsam sind. Einige davon sind Ihnen bereits begegnet, aber unten ist eine Liste dieser gemeinsamen Attribute für Ihre Referenz:

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihr Wissen: Grundlegende Kontrollen.

Dieser Artikel hat die älteren Eingabetypen behandelt — das ursprüngliche Set, das in den frühen Tagen von HTML eingeführt wurde und in allen Browsern gut unterstützt wird. Im nächsten Abschnitt werden wir uns die moderneren Werte des type Attributs ansehen.

• Zurück
• Übersicht: Webformulare
• Weiter